<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8"/>
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
        <title>
            客户服务支撑满意度考核打分表
        </title>
        <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet prefetch"/>
        <link href="css/animate.min.css" rel="stylesheet prefetch"/>
        <link href="css/default.css" rel="stylesheet" type="text/css"/>
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,100,400,300,600,700,800" rel="stylesheet"/>
        <link href="css/styles.css?t=1201" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap-stars.css?t=1201" rel="stylesheet" type="text/css"/>
        <style type="text/css">
        	.thanks li{
        		
				margin:0.5em 0.8em;
				list-style: none;
        	}
        	[v-cloak] {
			  display: none;
			}
        </style>
    </head>
    <body>
        <div class="covering">
            <div class="progress">
                <div class="progress-bar" style="width: 0;">
                    <span class="sr-only">
                        60% Complete
                    </span>
                </div>
            </div>
            <header class="">
                <h1 class="h1-header animated bounceInLeft">
                    客户服务支撑满意度考核打分表
                </h1>
            </header>
            <div class="container-fluid table-class" v-cloak>
                <div class="black ">
                    <div class="inner cover">
                        <div class="centerUp">
                            <div class="questionaire">
                                <form>
                                    <ul class="progress-form">
                                    	<li class="form-group animated fadeInRightBig activate" data-color="#E1523D" data-percentage="10%">
                                    		<label for="">
                                                <h2>
                                                    欢迎参与本次考核打分
                                                </h2>
                                                <div class="wokers">
                                                	请选择被考核人的姓名
                                                </div>
                                            </label>
                                            <select class="form-control" style="zoom:1.5;" v-model="workerCode">
                                            	<option value="">请选择</option>
                                                <option v-for="x in workers" :value="x.code">
                                                    {{x.name}}
                                                </option>
                                                
                                            </select>
                                            
                                    	</li>

                                        <li class="form-group animated fadeInRightBig activate" data-color="#E1523D" data-percentage="10%" v-for="(x,i) in questions" :class="index!=i+1?'hide':''">
                                            <label for="">
                                                <h2>
                                                    {{x.title}}
                                                </h2>
                                                <div class="text">
                                                	
                                                </div>
                                            </label>
                                            <select class="my-rating" :data-index="i">
                                            	<option value=""></option>
                                                <option value="1">
                                                    不合格
                                                </option>
                                                <option value="2">
                                                    不合格
                                                </option>
                                                <option value="3">
                                                    不合格
                                                </option>
                                                <option value="4">
                                                    不合格
                                                </option>
                                                <option value="5">
                                                    称职
                                                </option>
                                                <option value="6">
                                                    称职
                                                </option>
                                                <option value="7">
                                                    优秀
                                                </option>
                                                <option value="8">
                                                    优秀
                                                </option>
                                                <option value="9">
                                                    满意
                                                </option>
                                                <option value="10">
                                                    满意
                                                </option>
                                            </select>
                                            <br />
                                            <input type="text" class="form-control" v-model="x.comment" placeholder="追加评价"/>
                                        </li>
                                        
                                    </ul>
                                </form>
                            </div>
                            <div class="count">
                                <span class="img_cnt">
                                </span>
                                /
                                <span class="img_amt">
                                </span>
                            </div>
                            <button class="btn btn-default btn-lg nxt animated">
                                下一项
                                <span class="icon-next">
                                </span>
                            </button>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>
                </div>
                <form>
                    <input class="btn btn-default btn-lg hide submit" type="submit" value="确认发送"/>
                </form>
            </div>

            <div class="animated thanks hide">
			    <h1 style="font-weight:100; font-size:36px; width: 80%; margin: 0 auto;">
			        感谢您的参与！
			    </h1>
			    
		        <button class="btn btn-lg btn-success" style="margin:20px;" @click="onResultClick">
		            查看结果
		        </button>
			    
			</div>

			<div class="animated result hide">
				<ul style="text-align: left;">
					<li v-for="x in questions">
						<div class="title">{{x.title}}</div>
						<div class="rating">评分：{{x.rating}}，权重：{{x.weight}}，得分：{{x.rating*x.weight*10}}</div>
						<!-- <div class="comment">追加评价：{{x.comment}}</div> -->
					</li>
					<li>总分：{{total}}</li>
				</ul>
			    
			</div>
        </div>
    </body>
</html>

<script src="js/jquery-2.1.1.min.js">
</script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.barrating.js">
</script>
<script>
    $.ajaxSetup({
	  //如果服务端是用对象接收json
	  contentType : 'application/json'
	 });
	var vm=new Vue({
		el:'.covering',
		data:{
			workers:[],
			workerCode:'',
			questions:[{
				title:'1. 系统运行情况',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'2. 用户需求及服务支撑完成情况',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'3. 工作主观能动性、责任心',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'4. 服务支撑响应速度、办事效率',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'5. 系统运行保障质量、故障解决能力及质量、升级或软件调整质量',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'6. 专业技术、业务系统的熟悉程度',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'7. 劳动考勤纪律、日常管理制度遵守情况',
				rating:10,
				comment:'',
				weight:0.1
			},{
				title:'8. 用户表扬及投诉情况',
				rating:10,
				comment:'',
				weight:0.2
			},{
				title:'9. 遵守相关法规及保密规定',
				rating:10,
				comment:'',
				weight:0.1
			}],
			index:0,
			total:0
		},
		mounted:function(){
			var _this=this;
			
			$('.text').text('10分 满意')
			$('.my-rating').barrating({
		        theme: 'bootstrap-stars',
		        initialRating:10,
		        onSelect:function(value, text){
		        	var selectIndex=$(this).parents('li').find('select').eq(0).data('index');
		        	_this.questions[selectIndex].rating=value;
		        	$(this).parents('li').find('.text').text(value+' 分 '+text)
		        }
		    });
			
			$.get("/workers").then(function(resp){
   				_this.workers=resp.items;
   		  	})
		    $('.submit').click(function () {
		        event.preventDefault();
		        var darken = '<div class="darken" style="display:none;"></div>';
		        $('body').prepend(darken);
		        $('.darken').delay().show(0).animate({ opacity: 0.8 }, 'fast');
		        $('.thanks').removeClass('hide').addClass('fadeInDownBig');
		        for (var i = _this.questions.length - 1; i >= 0; i--) {
		        	_this.total+=_this.questions[i].rating*_this.questions[i].weight*10;
		        }

		        var ratingStr='',commentStr='',weightStr='',worker;
				for(var i=0;i<_this.questions.length;i++){
					if(i!=_this.questions.length-1){
						ratingStr+=_this.questions[i].rating+"@@";
						commentStr+=_this.questions[i].comment+" @@ ";
						weightStr+=_this.questions[i].weight+"@@";
					}else{
						ratingStr+=_this.questions[i].rating;
						commentStr+=_this.questions[i].comment;
						weightStr+=_this.questions[i].weight;
					}
				}
				for (var i = _this.workers.length - 1; i >= 0; i--) {
					if(_this.workerCode==_this.workers[i].code){
						worker=_this.workers[i];
					}
				}

				$.post("/answer",JSON.stringify({
					workerCode:worker.code,
					workerName:worker.name,
					rating:ratingStr,
					comment:commentStr,
					weight:weightStr,
					score:_this.total
				})
				).then(function(resp){
					console.log(resp)
				})

		    });
		    var img_cnt = $('li.activate').index() + 1;
		    var img_amt = $('li.form-group').length;
		    $('.img_cnt').html(img_cnt);
		    $('.img_amt').html(img_amt);
		    var progress = $('.img_cnt').text() / $('.img_amt').text() * 100;
		    $('.progress-bar').css('width', progress + '%');
		
		    
		    
		    $('.nxt').click(function () {
		    	console.log("code",_this.workerCode)
		    	if(_this.workerCode==''){
		    		alert("请选择被考核人员");
		    		return;
		    	}
		    	_this.index=_this.index+1;
		    	$('.nxt').removeClass('fadeInUp').addClass('fadeOutDown')
		    	setTimeout(function(){$('.nxt').removeClass('fadeOutDown').addClass('fadeInUp');},1000)
		        
		        if ($('.progress-form li').hasClass('activate')) {
		            $('p.alerted').removeClass('fadeInLeft').addClass('fadeOutUp');
		            var $activate = $('li.activate');
		            var $inactive = $('li.inactive');
		            $activate.removeClass('fadeInRightBig activate').addClass('fadeOutLeftBig');
		            $inactive.removeClass('hide inactive').addClass('activate fadeInRightBig').next().addClass('inactive');
		            var img_cnt = _this.index+1;
		            var img_amt = $('li.form-group').length;
		            // console.log(img_cnt,img_amt)
		            $('.img_cnt').html(img_cnt);
		            $('.img_amt').html(img_amt);
		            var progress = $('.img_cnt').text() / $('.img_amt').text() * 100;
		            $('.progress-bar').css('width', progress + '%');
		            if (img_cnt == img_amt) {
		                $('.count, .nxt').hide();
		                $('.submit').removeClass('hide');
		            }
		        }
		    });
		},
		methods:{
			onResultClick:function(){
				
				// var darken = '<div class="darken" style="display:none;"></div>';
		  //       $('body').prepend(darken);
		  //       $('.darken').delay().show(0).animate({ opacity: 0.8 }, 'fast');
		       $('.thanks').css('top','0').html($('.result').html())
		        // $('.result').removeClass('hide').addClass('fadeInDownBig');
			}
		}
	})

</script>
